import React, { useState, useEffect, useRef } from 'react';
import '../css/Home.css';
import Partners from '../components/Partners';
import Footer from '../components/Footer';
import ProductCenter from '../components/ProductCenter';
import CaseCenter from '../components/CaseCenter';
import heroBg from '../assets/hero-bg.png'; // 导入背景图片

const Home: React.FC = () => {
  const [currentPage, setCurrentPage] = useState(0);
  const totalPages = 5; // 总共5个页面（包括Footer）
  const isScrolling = useRef(false);

  useEffect(() => {
    const style = document.createElement('style');
    style.id = 'hide-scrollbar-style';
    style.innerHTML = `
      html {
        scroll-behavior: smooth;
      }

      body {
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
    `;
    document.head.appendChild(style);

    return () => {
      const styleElement = document.getElementById('hide-scrollbar-style');
      if (styleElement) {
        document.head.removeChild(styleElement);
      }
    };
  }, []);

  useEffect(() => {
    const handleWheel = (e: WheelEvent) => {
      if (isScrolling.current) return;
      
      if (e.deltaY > 50) {
        isScrolling.current = true;
        setCurrentPage(prev => Math.min(prev + 1, totalPages - 1));
      } else if (e.deltaY < -50) {
        isScrolling.current = true;
        setCurrentPage(prev => Math.max(prev - 1, 0));
      }
    };

    const handleKeyDown = (e: KeyboardEvent) => {
      if (isScrolling.current) return;
      
      if (e.key === 'ArrowDown') {
        isScrolling.current = true;
        setCurrentPage(prev => Math.min(prev + 1, totalPages - 1));
      } else if (e.key === 'ArrowUp') {
        isScrolling.current = true;
        setCurrentPage(prev => Math.max(prev - 1, 0));
      }
    };

    window.addEventListener('wheel', handleWheel);
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('wheel', handleWheel);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      isScrolling.current = false;
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    
    window.scrollTo({
      top: currentPage * window.innerHeight,
      behavior: 'smooth'
    });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [currentPage]);

  return (
    <div className="home-container">
      {/* 页面1: 英雄区域 */}
      <section 
        className="page hero-page"
        style={{
          backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(${heroBg})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat'
        }}
      >
        <div className="hero-content">
          <h1>汽车电子测试专家</h1>
          <p>专注汽车软件测试 · 国家高新技术企业 · 服务30+知名车企</p>
          <button className="cta-button">了解我们的服务</button>
        </div>
        <div className="scroll-indicator">
          <span>向下滚动</span>
          <div className="arrow"></div>
        </div>
      </section>

      {/* 页面2: 产品中心 */}
      <ProductCenter />

      {/* 页面3: 案例中心 */}
      <CaseCenter />

      {/* 页面4: 重点合作客户 */}
      <section className="page partners-page">
        <Partners />
      </section>

      {/* 页面5: Footer */}
      <section className="page footer-page">
        <Footer />
      </section>

      {/* 页面指示器 */}
      <div className="page-indicator">
        {[...Array(totalPages)].map((_, index) => (
          <button
            key={index}
            className={`indicator-dot ${currentPage === index ? 'active' : ''}`}
            onClick={() => setCurrentPage(index)}
          >
            <span className="dot-circle"></span>
          </button>
        ))}
      </div>
    </div>
  );
};

export default Home;